import {useEffect,useState} from 'react';
import Taro,{useDidShow} from '@tarojs/taro';
import {connect} from 'react-redux';
import Styles from './index.module.less';
import {getGlobalData, Request} from '../../util';
import dayjs from 'dayjs';

function index(props){

    const currentYear = dayjs().year();
    const currentMonth = dayjs().month() + 1;
    const currentDay = dayjs().date();

    const {selectedMonth, selectedDay, selectedYear, selectedStore} = props;

    const [timingArr, setTimingArr] = useState([]);

    const domain = getGlobalData('domain');

    const getInitTimingArr = () =>{

        //获取当日的可预约时间表格
        let fmt_selectedMonth =  formatDate(selectedMonth ?? currentMonth);
        let fmt_selectedDay = formatDate(selectedDay ?? currentDay);
        let date = (selectedYear ?? currentYear) +"/"+fmt_selectedMonth+"/"+fmt_selectedDay;

        Request(domain+"/client/availableBooking/bookingTiming",{date: date, store: selectedStore}).then((e)=>{
            let res = e.data.data;
            let newTimingArr = [];
            let k = 0;
            for(let i in res){
                if(res[i] == 1){
                    newTimingArr[k] = {time: i, status: res[i], style:{}}
                }else{
                    newTimingArr[k] = {time: i, status: res[i], style:{backgroundColor: "#DEDEDE", color:"#fff"}}
                }
                
                k++;
            }
            setTimingArr(newTimingArr);
        })
    }

    useEffect(()=>{
        getInitTimingArr();
    },[selectedMonth,selectedDay,selectedYear,selectedStore])



    const formatDate = (num) => {
        if(num<10){
            return "0"+num;
        }else{
            return num;
        }
    }
    
    const handleTimingBtn = (time) => {

        let newTimingArr = [];
        for(let i in timingArr){
  
            //判断是否是点击的时间
            if(time == timingArr[i].time){
                
                //判断是否状态为1
                if(timingArr[i].status == 1){
                    newTimingArr[i] = {time:timingArr[i].time, status:timingArr[i].status, isSelected:true,style:{backgroundColor:"#E6C7C7",color:"#6A3E3E",border:"1px solid #63403F"}}
                    Taro.setStorageSync("selectedTime",timingArr[i].time);
                }else{
                    newTimingArr[i] = timingArr[i]
                }

            }else{
                //判断状态是否为1
                if(timingArr[i].status == 1){
                    //判断是否为之前被点击的时间
                    if(timingArr[i].isSelected == true){
                        
                        //判断点击的时间是否是状态为0
                        if(getStatusByTime(time) == 0){
                            newTimingArr[i] = timingArr[i]
                        }else{
                            newTimingArr[i] = {time:timingArr[i].time, status:timingArr[i].status}
                        }
            
                    }else{
                        newTimingArr[i] = timingArr[i]
                    }
                }else{
                    newTimingArr[i] = timingArr[i]
                }   
                  
            }

           
        }

        setTimingArr(newTimingArr);
    }

    const getStatusByTime = (time) => {
        for(let i in timingArr){
            if(timingArr[i].time == time){
                return timingArr[i].status;
            }
        }
    }

    return (
        <view class={Styles.timeSelector}>
            <view class={Styles.am}>
                <view class={Styles.head}>
                    上午
                </view>
                <view class={Styles.times_wrap}>
                    {
                        timingArr.map((item,key)=>{
                            if(key<5){    
                                return <view class={Styles.dot} style={item.style} onClick={()=>{
                                    handleTimingBtn(item.time);
                                }}>{item.time}</view>
                            }
                        })
                    }
                </view>
            </view>

            <view class={Styles.am} style={{marginTop:"8px"}}>
                <view class={Styles.head}>
                    下午
                </view>
                <view  class={Styles.times_wrap}>
                    {
                        timingArr.map((item,key)=>{
                            
                            if(key>5){
                                return <view class={Styles.dot} style={item.style} onClick={()=>{
                                    handleTimingBtn(item.time);
                                }}>{item.time}</view>
                     
                            }
                        })
                    }
                </view>
            </view>

            
        </view>
    )

}

const mapStateToProps = (state) => {
    return state;
}

export default connect(mapStateToProps)(index);